import { useState , useEffect } from "react";
import { View , Text , Image } from "@tarojs/components";
import './index.less';
import http from "../../../utils/http";
import Taro,{getCurrentInstance} from "@tarojs/taro";
import{AtMessage}from'taro-ui';
function Course() {
  const current=getCurrentInstance();
  const userInfo=JSON.parse(Taro.getStorageSync('userInfo'));
  const [course,setCourse]=useState({type:''})
  const [myAbility,setMyAbility]=useState({});
  const [courseAbility,setCourseAbility]=useState({});
  const [sel,setSel]=useState(0)
  useEffect(()=>{
    http({
      url:'/home/getThisCourse',
      data:{
        id:current.router.params.id
      }
    }).then(res=>{
      setCourse(res.data.data[0])
    })
    http({
      url:'/home/getMyAbility',
      data:{
        id:userInfo.id
      }
    }).then(res=>{
      setMyAbility(res.data.data[0])
    })
    http({
      url:'/home/getCourseAbility',
      data:{
        id:current.router.params.id
      }
    }).then(res=>{
      setCourseAbility(res.data.data[0])
    })
  },[])
  return<View id="course">
    <View className="header">
      <View className="h-left"><Text className="back" onClick={()=>{Taro.navigateBack({delta: 1})}}>《  </Text>{course.title}</View>
      <View className="h-right">开始学习</View>
    </View>
    <View className="myCourse">
      <Image src={course.course_img_url}></Image>
    </View>
    <View className="tabs">
      <View className={sel==0?"active":""} onClick={()=>{setSel(0)}}>介绍</View>
      <View className={sel==1?"active":""} onClick={()=>{setSel(1)}}>指标</View>
      <View className={sel==2?"active":""} onClick={()=>{setSel(2)}}>评论</View>
    </View>
    <View className="box1" style={{display:sel==0?"flex":"none"}}>
      <View>类型：{course.type.substring(0,course.type.length-1)}</View>
      <View>难度：{course.level}</View>
      <View className="explain">课程描述：{course.explain}</View>
      <View className="btn" onClick={()=>{
        http({
          url:'/home/addCourseToMyCollection',
          method:'post',
          data:{
            user_id:userInfo.id,
            join_course_id:current.router.params.id
          }
        }).then(res=>{
          if(res.data.code==200){
            Taro.atMessage({
              'message':'收藏成功',
              'type': "success",
            })
          }else{
            Taro.atMessage({
              'message':'收藏失败',
              'type': "error",
            })
          }
        })
      }}>+收藏</View>
      <AtMessage/>
    </View>
    <View className="box2" style={{display:sel==1?"block":"none"}}>
      <View className="title">自我成长</View>
      <View className="con">
        <View className="key">追求卓越</View>
        <View className="value">
          <View className="v1" style={{width:`${(myAbility.pursuit+courseAbility.pursuit)/12}rem`}}>
            <View className="v2" style={{width:`${myAbility.pursuit/12}rem`}}></View>
          </View>
        </View>
      </View>
      <View className="con">
        <View className="key">抗压能力</View>
        <View className="value">
          <View className="v1" style={{width:`${(myAbility.compressive+courseAbility.compressive)/12}rem`}}>
            <View className="v2" style={{width:`${myAbility.compressive/12}rem`}}></View>
          </View>
        </View>
      </View>
      <View className="con">
        <View className="key">学习能力</View>
        <View className="value">
          <View className="v1" style={{width:`${(myAbility.learn+courseAbility.learn)/12}rem`}}>
            <View className="v2" style={{width:`${myAbility.learn/12}rem`}}></View>
          </View>
        </View>
      </View>
      <View className="con">
        <View className="key">积极主动</View>
        <View className="value">
          <View className="v1" style={{width:`${(myAbility.active+courseAbility.active)/12}rem`}}>
            <View className="v2" style={{width:`${myAbility.active/12}rem`}}></View>
          </View>
        </View>
      </View>
      <View className="title">人际交往</View>
      <View className="con">
        <View className="key">沟通能力</View>
        <View className="value">
          <View className="v3" style={{width:`${(myAbility.communication+courseAbility.communication)/12}rem`}}>
            <View className="v4" style={{width:`${myAbility.communication/12}rem`}}></View>
          </View>
        </View>
      </View>
      <View className="con">
        <View className="key">团队合作</View>
        <View className="value">
          <View className="v3" style={{width:`${(myAbility.cooperation+courseAbility.cooperation)/12}rem`}}>
            <View className="v4" style={{width:`${myAbility.cooperation/12}rem`}}></View>
          </View>
        </View>
      </View>
      <View className="con">
        <View className="key">协作能力</View>
        <View className="value">
          <View className="v3" style={{width:`${(myAbility.collaboration+courseAbility.collaboration)/12}rem`}}>
            <View className="v4" style={{width:`${myAbility.collaboration/12}rem`}}></View>
          </View>
        </View>
      </View>
      <View className="con">
        <View className="key">影响说服</View>
        <View className="value">
          <View className="v3" style={{width:`${(myAbility.impact+courseAbility.impact)/12}rem`}}>
            <View className="v4" style={{width:`${myAbility.impact/12}rem`}}></View>
          </View>
        </View>
      </View>
    </View>
    <View className="box3" style={{display:sel==2?"block":"none"}}>
      <View className="score">
        <View className="con-header">
          <View className="scores">89分</View>
          <View className="title">综合得分</View>
        </View>
        <View className="con-con">
          <View className="con">
            <View className="key">决策判断</View>
            <View className="value">
              <View className="v1" style={{width:`${(myAbility.judge+courseAbility.judge)/16}rem`}}>
                <View className="v2" style={{width:`${myAbility.judge/16}rem`}}></View>
              </View>
            </View>
          </View>
          <View className="con">
            <View className="key">高效执行</View>
            <View className="value">
              <View className="v1" style={{width:`${(myAbility.efficient+courseAbility.efficient)/16}rem`}}>
                <View className="v2" style={{width:`${myAbility.efficient/16}rem`}}></View>
              </View>
            </View>
          </View>
          <View className="con">
            <View className="key">规划安排</View>
            <View className="value">
              <View className="v1" style={{width:`${(myAbility.arrange+courseAbility.arrange)/16}rem`}}>
                <View className="v2" style={{width:`${myAbility.arrange/16}rem`}}></View>
              </View>
            </View>
          </View>
          <View className="con">
            <View className="key">认真负责</View>
            <View className="value">
              <View className="v1" style={{width:`${(myAbility.seriously+courseAbility.seriously)/16}rem`}}>
                <View className="v2" style={{width:`${myAbility.seriously/16}rem`}}></View>
              </View>
            </View>
          </View>
        </View>
      </View>
      <View className="comment">
        <View className="con">
          <Image src="https://img2.baidu.com/it/u=565417521,1485936572&fm=26&fmt=auto&gp=0.jpg" className="img"></Image>
          <View className="content">
            <View className="user-con">
              <Text className="username">张秋子：</Text>参加这个课程让我的office技能有了很大的提升，在平时工作上有很大的帮助，建议大家都来学习一下。
            </View>
            <View className="time">2021/01/01发布</View>
          </View>
        </View>
        <View className="con">
          <Image src="https://img2.baidu.com/it/u=565417521,1485936572&fm=26&fmt=auto&gp=0.jpg" className="img"></Image>
          <View className="content">
            <View className="user-con">
              <Text className="username">张秋子：</Text>参加这个课程让我的office技能有了很大的提升，在平时工作上有很大的帮助，建议大家都来学习一下。
            </View>
            <View className="time">2021/01/01发布</View>
          </View>
        </View>
        <View className="con">
          <Image src="https://img2.baidu.com/it/u=565417521,1485936572&fm=26&fmt=auto&gp=0.jpg" className="img"></Image>
          <View className="content">
            <View className="user-con">
              <Text className="username">张秋子：</Text>参加这个课程让我的office技能有了很大的提升，在平时工作上有很大的帮助，建议大家都来学习一下。
            </View>
            <View className="time">2021/01/01发布</View>
          </View>
        </View>
        <View className="con">
          <Image src="https://img2.baidu.com/it/u=565417521,1485936572&fm=26&fmt=auto&gp=0.jpg" className="img"></Image>
          <View className="content">
            <View className="user-con">
              <Text className="username">张秋子：</Text>参加这个课程让我的office技能有了很大的提升，在平时工作上有很大的帮助，建议大家都来学习一下。
            </View>
            <View className="time">2021/01/01发布</View>
          </View>
        </View>
        <View className="con">
          <Image src="https://img2.baidu.com/it/u=565417521,1485936572&fm=26&fmt=auto&gp=0.jpg" className="img"></Image>
          <View className="content">
            <View className="user-con">
              <Text className="username">张秋子：</Text>参加这个课程让我的office技能有了很大的提升，在平时工作上有很大的帮助，建议大家都来学习一下。
            </View>
            <View className="time">2021/01/01发布</View>
          </View>
        </View>
      </View>
    </View>
  </View>;
}
export default Course;